<template>
	<div class="shop" ref="shopWrapper">
		<div class="content">
			<div class="title">
				<div class="line"></div>
				<div class="text">推荐商家</div>
				<div class="line"></div>
			</div>
			<ul class="content-wrapper">
				<li class="shop-item border-bottom"
					v-for="(item,index) of restaurantList"
					:key="index"
				>
					<div class="img">
						<img :src="item.avatar" width="55" height="55">
					</div>
					<div class="content">
						<h1 class="name">{{item.name}}</h1>
						<div class="star-wrapper">
							<star :size="24" :score="item.score"></star>
							<span class="score">{{item.score}}</span>
							<span class="sell">月售{{item.sellCount}}</span>
						</div>
						<div class="delivery">
							<span class="">￥{{item.minPrice}}起送</span>
							<span class="">配送费￥{{item.deliveryPrice}}</span>
						</div>
						<div v-if="item.supports"
				             class="support"
				        >
				          <span class="icon" :class="classMap[item.supports[0].type]"></span>
				          <span class="text">{{item.supports[0].description}}</span> 
				        </div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import star from 'components/star/star'
	export default {
		props: {
			restaurantList: Array
		},
		created() {
		    this.classMap = ['decrease','discount','special','invoice','guarantee']
		},
		components: {
			star
		}
	}
</script>

<style lang="stylus" scoped>
    @import "~common/stylus/mixin.styl"
	.shop
		padding-bottom 50px
		margin-top 2px
		width 100%
		overflow hidden		
		.title
			display flex
			width 50%
			margin 10px auto 10px auto
			.line 
				flex 1
				position relative
				top -6px
				border-bottom 1px solid #000 
			.text
				font-size 14px
				padding 0 12px
		.shop-item
			margin 10px
			border-bottom(#8998AD)
			&:last-child
				border-none()
				margin-bottom 0	
			.img
				display inline-block
				margin-right 10px
				vertical-align top
			.content
				display inline-block
				fontt-size 14px
				.name
					font-size 16px
					line-height 18px
					font-wight 700
				.star-wrapper,.delivery
					margin-top 8px
					padding 2px 0
					font-size 10px
					color $darktext
					.star 
						display inline-block
					.score
						display inline-block
						margin 0 5px
					.sellCount
						display inline-block
				.support
					margin-top 8px
					padding 2px 0
					font-size 10px
					color $darktext
					.icon
						display inline-block
						vertical-align top 
						width 16px
						height 16px
						margin-right 4px
						background-size 16px 16px
						background-repeat no-repeat
						&.decrease
							bg-image('decrease_1')
						&.discount
							bg-image('discount_1')
						&.guarantee
							bg-image('guarantee_1')
						&.invoice
							bg-image('invoice_1')
						&.special
							bg-image('special_1')
					.text
						line-height 16px
						font-size 12px
						color $darktext		          			   		            			        					
</style>